import { FC } from "react";
import { Outlet, useNavigate, useLocation } from "react-router-dom";
import { Space, Button } from "antd";
import {
  PlusOutlined,
  UnorderedListOutlined,
  DeleteOutlined,
  StarOutlined,
} from "@ant-design/icons";

const ManageLayout: FC = () => {
  const nav = useNavigate();
  const { pathname } = useLocation();

  return (
    <>
      <div className="flex w-[1200px] mx-auto">
        <div className="w-40 flex-shrink-0 mr-4">
          <Space direction="vertical">
            <Button type="primary" icon={<PlusOutlined />} onClick={() => nav("/question/stat")}>
              新建问卷
            </Button>
            <div className="mb-6"></div>
            <Button
              type={pathname.startsWith("/manage/list") ? "default" : "text"}
              icon={<UnorderedListOutlined />}
              onClick={() => nav("/manage/list")}
            >
              我的问卷
            </Button>
            <Button
              type={pathname.startsWith("/manage/star") ? "default" : "text"}
              icon={<StarOutlined />}
              onClick={() => nav("/manage/star")}
            >
              星标问卷
            </Button>
            <Button
              type={pathname.startsWith("/manage/trash") ? "default" : "text"}
              icon={<DeleteOutlined />}
              onClick={() => nav("/manage/trash")}
            >
              回收站
            </Button>
          </Space>
        </div>
        <div className="flex-1">
          <Outlet></Outlet>
        </div>
      </div>
      <div className="text-center">list footer</div>
    </>
  );
};

export default ManageLayout;
